<template>
  <el-dialog
    title="订单详情"
    width="90%"
    :modelValue="visible"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 120px">
            <el-option label="系统订单号" value="customer_order_no"></el-option>
            <el-option label="追踪号" value="tracking_number"></el-option>
          </el-select>
          <VBatchInput
            v-model="form.input.value"
            @search="query"
            class="w-60"
          />
        </VGroup>
      </template>
    </VTable>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import VBatchInput from '@/componentsPublic/BatchInput/index.vue'
import { logisticsTimelinessOrders } from "../../api.js";
const emit = defineEmits(["refresh"]);

const visible = ref(false);

const tableRef = ref();
const order_data = ref({});
const open = (val) => {
  order_data.value = val;
  visible.value = true;
};
const tableOptins = reactive({
  formConfig: {
    data: {
      input: { type: "customer_order_no", value: "" },
    },
  },
  rowConfig: { height: 100 },
  tooltipConfig: {
    showAll: false,
  },
  height: 600,
  border: true,
  isToggle: true,
  columns: [
    { type: "seq", width: 50 },
    {
      title: "物流信息",
      minWidth: 160,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row?.channel_name} title="渠道"></VText>
            <VText value={row?.ship_warehouse_name} title="仓库"></VText>
          </div>
        ),
      },
    },
    {
      title: "平台/店铺名称/目的国家",
      minWidth: 160,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row?.platform_name}></VText>
            <VText value={row?.shop_name}></VText>
            <VText value={row?.dest_country}></VText>
            <div
              class={`mr-2 icon zhandian-iconfont mb-2 mt-2 icon-zhandian_${row?.dest_country?.toLowerCase()}`}
            ></div>
          </div>
        ),
      },
    },
    {
      title: "系统订单号",
      minWidth: 160,
      field: "customer_order_no",
    },
    {
      title: "追踪单号",
      minWidth: 160,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row?.tracking_number} title="追踪号"></VText>
          </div>
        ),
      },
    },
    {
      title: "时间",
      minWidth: 160,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row?.delivery_time} title="实际发货"></VText>
            <VText value={row?.last_delivery_time} title="最迟发货"></VText>
            <VText value={row?.online_time} title="首次上网"></VText>
            <VText value={row?.finish_time} title="妥投时间"></VText>
          </div>
        ),
      },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        let params = Object.assign({}, form, order_data.value);
        return logisticsTimelinessOrders({ ...params, ...page });
      },
    },
  },
});
const handleClose = async (refresh) => {
  visible.value = false;
  if (refresh) emit("refresh");
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
